<template>
  <div class="article">

    <divider>热门文章</divider>
    <ol class="clearfix">
      <li v-for="item in list" class="item">
        <router-link v-bind:to="'/article/'+item.id" v-text="item.title"></router-link>
      </li>
    </ol>

  </div>
</template>

<script>
  import {Divider} from 'vux';
  export default {
    name: 'HotArticle',
    components: {
      Divider
    },
    mounted() {
      this.$nextTick(function () {
        this.load(); //概况
      })
    },
    data () {
      return {
        apiUrl:apiUrl,
        list: []
      }
    },
    methods: {
      //分类
      load() {

        this.$http.get(this.apiUrl + 'Article/hotArticles', {
          params: {
            'page': 1
          }
        }).then(response => {
          this.list = response.data.list;
        }, response => {

          console.log(response);
        });


      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .article{color:#fff;}
  .article .item{box-sizing: border-box;width:50%;padding:8px 10px;float:left;list-style: none;}
  .article a{color:#fff;}
  .clearfix::after {
      display: block;
      content: "";
      clear: both;
  }

</style>
